<ul class="flex flex-col gap-1">
  @for (item of menus(); track $index) {
    <li class="flex flex-col items-center">
      <div class="pac-router-link w-full shrink-0 flex justify-start items-center rounded-lg cursor-pointer"
        [class.has-submenu]="item.children"
        [routerLink]="item.children ? null : item.link"
        routerLinkActive
        #rla="routerLinkActive"
        [class.active]="rla.isActive"
        (click)="item.expanded=!isActive(item)"
      >
        @if (isCollapsed) {
          <button type="button" class="menu-button shrink-0 w-12 h-12 flex justify-center items-center p-2 leading-4 rounded-xl opacity-80 hover:opacity-100 hover:scale-110 transition-all duration-200 hover:bg-hover-bg"
            [routerLink]="isCollapsed ? item.link : null"
            routerLinkActive
            #rla="routerLinkActive"
            [class.active]="rla.isActive"

            [matTooltip]="item.title"
            matTooltipPosition="right"
            [matTooltipDisabled]="!!item.children?.length"

            (mouseover)="item.children?.length && openSubMenu(item)"
            (mouseleave)="item.children?.length && closeSubMenu(item)"
             cdkOverlayOrigin
             #subMenuTrigger="cdkOverlayOrigin"
          >
            <mat-icon fontSet="material-icons-round">{{ item.matIcon }}</mat-icon>
          </button>

          @if (item.children?.length) {
            <ng-template #connectedOverlay="cdkConnectedOverlay"
              cdkConnectedOverlay
              [cdkConnectedOverlayOrigin]="subMenuTrigger"
              [cdkConnectedOverlayOpen]="menuOpen()[item.link]"
              [cdkConnectedOverlayOffsetY]="-5"
              [cdkConnectedOverlayPositions]="[
                {
                  originX: 'end',
                  originY: 'center',
                  overlayX: 'start',
                  overlayY: 'bottom'
                },
              ]"
            >
              <div class="flex flex-col p-2 bg-components-panel-bg rounded-xl shadow-sm border-light"
                (mouseover)="openSubMenu(item)"
                (mouseleave)="closeSubMenu(item)">
                @for (child of item.children; track $index) {
                  @if (!child.hidden) {
                    <button class="p-2 rounded-lg hover:bg-hover-bg"
                      [routerLink]="child.link"
                      routerLinkActive [routerLinkActiveOptions]="{ exact: true }"
                      #rla="routerLinkActive"
                      (isActiveChange)="child.isActive = $event"
                      [class.active]="rla.isActive"
                      (click)="clicked.emit()"
                    >
                      <div class="flex items-center">
                        @if (child.matIcon) {
                          <mat-icon fontSet="material-icons-round" class="text-text-secondary mr-2">{{ child.matIcon }}</mat-icon>
                        }
                        <span>{{ child.title }}</span>
                      </div>
                    </button>
                  }
                }
              </div>
            </ng-template>
          }
        } @else if (item.matIcon) {
          <mat-icon displayDensity="cosy" fontSet="material-icons-round">{{ item.matIcon }}</mat-icon>
        }

        @if (!isCollapsed) {
          <span class="flex-1 ml-3">{{ item.title }}</span>

          @if (item.children) {
            <svg class="ml-auto w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path [attr.d]="item.expanded ? 'M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11' : 'M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5'" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                style="transition: all 200ms ease-in-out 0s">
              </path>
            </svg>
          }
        }
      </div>

      @if (!isCollapsed && item.children) {
        <ul class="pac-sub-menu w-full flex flex-col ml-3 mt-1" [class.expanded]="isActive(item)"
          [class.gap-1]="isActive(item)"
        >
          @for (child of item.children; track $index) {
            @if (!child.hidden) {
              <li class="pac-router-link flex items-center py-2 px-4 rounded-lg cursor-pointer"
                [routerLink]="child.link"
                routerLinkActive [routerLinkActiveOptions]="{ exact: true }"
                #rla="routerLinkActive"
                (isActiveChange)="child.isActive = $event"
                [class.active]="rla.isActive"
                (click)="clicked.emit()">
                @if (child.matIcon) {
                  <mat-icon displayDensity="compact" fontSet="material-icons-round">{{ child.matIcon }}</mat-icon>
                }
                <span class="ml-3">{{ child.title }}</span>
              </li>
            }
          }
        </ul>
      }
    </li>
  }
</ul>
